<template>
  <el-select
    ref="commonSelect"
    :value="commonValues"
    :placeholder="placeholder"
    filterable
    clearable
    :filter-method="handleCommonFilter"
    style="width: 100%"
    :loading="loading"
    @clear="clearTreeSelect()"
    @focus="getDataSource"
  >
    <el-option
      :value="commonValues"
      class="options"
      style="height:220px;background-color:#fff;overflow-y:auto;"
    >
      <el-tree
        id="tree-option"
        ref="commonTree"
        accordion
        :filter-node-method="filterNode"
        :data="saveCommonOptions"
        @node-click="handleCommonClick"
      >
        <span slot-scope="{ node, data }" class="span-ellipsis">
          <span :title="data[showLabel]">{{ data[showLabel] }}</span>
        </span>
      </el-tree>
    </el-option>
  </el-select>
</template>

<script type="text/ecmascript-6">
import { getCommonDataSource } from '@/api/reportCenter';
export default {
  props: {
    placeholder: {
      type: String,
      default: () => {
        return '请填写';
      }
    },
    commonValues: {
      type: String,
      default: () => {
        return '';
      }
    },
    itemUrl: {
      type: String,
      default: () => {
        return '';
      }
    },
    commonIndex: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    chooseYear: {
      type: String,
      default: () => {
        return new Date().getFullYear() + '';
      }
    },
    showLabel: {
      type: String,
      default: () => {
        return '';
      }
    },
    // 0 还有年份 1 其他参数
    paramType: {
      type: String,
      default: () => {
        return '0';
      }
    },
    type: {
      type: String,
      default: () => {
        return '0';
      }
    },
    label: {
      type: String,
      default: () => {
        return '0';
      }
    },
    params: {
      type: Object,
      default: () => {
        return {};
      }
    }

  },
  data() {
    return {
      loading: false,
      saveCommonOptions: []
    };
  },
  methods: {
    getDataSource() {
      let params = '';
      this.loading = true;
      if (this.label === '大类') {
        this.$emit('clearDate', {
        });// 特殊事件，特殊处理
      }
      if (this.$router.history.current.meta.title === '收入表' || this.$router.history.current.meta.title === '收支平衡表') {
        if (this.label === '支付科目' || this.label === '转移支付科目') {
          params = this.params;
        } else {
          params = {
            type: this.type,
            resultAsTree: true
          };
        }
      } else {
        if (this.paramType === '0') {
          params = {
            year: this.chooseYear.split('-')[0],
            resultAsTree: true
          };
        } else {
          params = {
            type: this.paramType,
            resultAsTree: true
          };
        }
      }
      getCommonDataSource(params, this.itemUrl).then(res => {
        this.loading = false;

        if (res.success) {
          this.saveCommonOptions = res.data;
        } else {
          this.saveCommonOptions = [];
        }
      });
    },
    handleCommonFilter(val) {
      this.$refs.commonTree.filter(val);
    },
    handleCommonClick(node) {
      if (!node.children) {
        this.$emit('changeData', {
          data: node,
          commonIndex: this.commonIndex,
          showLabel: this.showLabel,
          label: this.label
        });// select事件触发后，自动触发showCityName事件
        this.$refs.commonSelect.blur();
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.showLabel].indexOf(value) !== -1;
    },
    // 公共清除事件
    clearTreeSelect() {
      this.$emit('clearTreeSelect', {
        commonIndex: this.commonIndex
      });// 清除事件
    }

  }
};
</script>

